import 'package:flutter/material.dart';
import 'package:flutter_hx/pages/me_check_in/me_check_in_logic.dart';
import 'package:flutter_hx/services/app_theme_services.dart';
import 'package:flutter_hx/theme/font_size.dart';
import 'package:flutter_hx/widgets/check_in_calender.dart';
import 'package:flutter_hx/widgets/ez_image.dart';
import 'package:get/get.dart';
import 'package:intl/intl.dart';

///签到页

class MeCheckInPage extends GetView<MeCheckInLogic> {
  const MeCheckInPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        children: [
          _body(),
          _appbar(),
        ],
      ),
    );
  }

  ///底下的内容
  Widget _body() {
    return Column(
      children: [
        ///上半部分，签到按钮和日期星期标题
        _banner(),
        Container(
            decoration: BoxDecoration(color: Colors.white, boxShadow: [
              BoxShadow(
                  color: Colors.black.withOpacity(0.05),
                  offset: const Offset(0, 10),
                  blurRadius: 10)
            ]),

            ///下半部分，日历，传入已签到日期数组
            child: Obx(() {
              List<int> checkedList = controller.monthCheckList;
              return CheckInCalender(
                checkedList: checkedList,
              );
            })),
      ],
    );
  }

  ///banner和月份星期
  Widget _banner() {
    DateTime now = DateTime.now();

    ///格式处理
    String format = "yyyy-MM";
    String currentDate = DateFormat(format).format(now);
    return Container(
      width: Get.width,
      height: 275,
      decoration: const BoxDecoration(
        image: DecorationImage(
            image: AssetImage("assets/images/check_in_banner.png"),
            fit: BoxFit.cover),
      ),
      child: Stack(
        alignment: Alignment.center,
        children: [
          Positioned(
            bottom: 0,
            child: Column(
              children: [
                ///日期标题
                _dateTitle(currentDate),

                ///星期标题
                _weekDayRow(),
              ],
            ),
          ),

          ///签到按钮和label
          Positioned(
              top: 64,
              child: SafeArea(
                child: Obx(() {
                  ///是否已经签到
                  bool checked = controller.checked;

                  ///本月签到日期数组
                  List<int> checkedList = controller.monthCheckList;
                  return Column(
                    children: [
                      ///签到按钮
                      InkWell(
                        onTap: () => controller.sign(),
                        child: Container(
                          height: 43,
                          width: 124.5,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(45),
                            border: checked
                                ? Border.all(color: Colors.white, width: 0.5)
                                : null,
                            color: checked ? null : Colors.white,
                          ),
                          alignment: Alignment.center,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              EzImage.asset(
                                checked
                                    ? "check_in_inline_done.png"
                                    : "check_in_inline_undone.png",
                                width: 18,
                                height: 18,
                              ),
                              const SizedBox(
                                width: 5,
                              ),
                              Text(
                                checked ? "已签到" : "立即签到",
                                style: TextStyle(
                                    color: checked
                                        ? Colors.white
                                        : const Color(0xFF00C3B3),
                                    fontSize: FontSize.pt17,
                                    fontWeight: FontWeight.w600),
                              )
                            ],
                          ),
                        ),
                      ),
                      const SizedBox(height: 14),

                      ///签到label
                      Text(
                        checked
                            ? "已签到${checkedList.length}天，继续加油！"
                            : "签到领取今天的酒贝哦~",
                        style: const TextStyle(
                            color: Colors.white, fontSize: FontSize.pt15),
                      )
                    ],
                  );
                }),
              ))
        ],
      ),
    );
  }

  ///上部分的日期标题
  Widget _dateTitle(String currentDate) {
    return Container(
      width: Get.width,
      height: 44,
      decoration: const BoxDecoration(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20), topRight: Radius.circular(20)),
          color: Colors.white),
      alignment: Alignment.center,
      child: Text(
        ///当前日期
        currentDate,
        style: const TextStyle(color: Colors.black, fontSize: FontSize.pt18),
      ),
    );
  }

  ///下部分的星期
  Widget _weekDayRow() {
    return Container(
      height: 30,
      width: Get.width,
      decoration: BoxDecoration(boxShadow: [
        BoxShadow(
            color: Colors.black.withOpacity(0.1),
            offset: const Offset(0, -1),
            blurRadius: 1),
        BoxShadow(
            color: Colors.black.withOpacity(0.2),
            offset: const Offset(0, 1),
            blurRadius: 2)
      ], color: Colors.white),
      child: Row(
        children: [
          _weekDay("日"),
          _weekDay("一"),
          _weekDay("二"),
          _weekDay("三"),
          _weekDay("四"),
          _weekDay("五"),
          _weekDay("六"),
        ],
      ),
    );
  }

  ///星期widget
  Widget _weekDay(String text) {
    return Expanded(
      child: Center(
        child: Text(
          text,
          style: const TextStyle(
              color: Color(0xFF323233), fontSize: FontSize.pt12),
        ),
      ),
    );
  }

  ///appbar
  Widget _appbar() {
    return SafeArea(
        child: SizedBox(
      height: 44,
      width: Get.width,
      child: Stack(
        alignment: Alignment.center,
        children: [
          Text(
            "每日签到",
            style: AppThemeServices.textTheme.appBarTitle
                .copyWith(color: Colors.white),
          ),
          const Positioned(
              left: 0,
              child: BackButton(
                color: Colors.white,
              ))
        ],
      ),
    ));
  }
}
